<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>监控面板</title>
    <link rel="stylesheet" type="text/css" href="/static/viewAi.css"/>
    <script src="/static/chart.js/4.5.0/chart.umd.min.js"></script>
    <script src="/static/viewCom.js"></script>
    <script src="/static/viewAi.js"></script>
</head>
<body>
<div class="container">
    <!-- 摘要统计卡片 -->
    <div class="summary-cards">
        <div class="card card-primary">
            <div class="card-title">调用次数</div>
            <div class="card-text" id="totalCount">0</div>
        </div>
        <div class="card card-success">
            <div class="card-title">成功</div>
            <div class="card-text" id="successCount">0</div>
        </div>
        <div class="card card-info">
            <div class="card-title">成功率</div>
            <div class="card-text" id="avgSuccessRate">0%</div>
        </div>
    </div>

    <!-- 刷新控制 -->
    <div class="control-panel control-panel-flex" id="call-service-container">
    </div>

    <!-- 刷新控制 -->
    <div class="control-panel">
        <button id="refreshBtn" class="btn btn-primary">刷新数据</button>
        <div class="form-check">
            <input class="form-check-input" type="checkbox" id="autoRefresh">
            <label class="form-check-label" for="autoRefresh">自动刷新</label>
        </div>
        <select id="refreshInterval" class="form-select">
            <option value="5000">5秒</option>
            <option value="10000" selected>10秒</option>
            <option value="30000">30秒</option>
            <option value="60000">1分钟</option>
        </select>
    </div>

    <!-- 方法调用统计表 -->
    <div class="table-container">
        <div class="table-header">
            <h4>详细统计</h4>
        </div>
        <div id="methodtrace">
            <div class="loading">
                <div class="spinner"></div>
                <p>正在加载数据...</p>
            </div>
        </div>
    </div>

    <!-- 方法调用表 -->
    <div class="table-container">
        <div class="table-header">
            <h4>最近8小时日志</h4>
        </div>
        <div id="method">
            <div class="loading">
                <div class="spinner"></div>
                <p>正在加载数据...</p>
            </div>
        </div>
    </div>

    <!-- 时间复杂度弹出框结构 -->
    <div id="modal-ana" class="modal">
        <div class="modal-content">
            <span id="modal-ana-close-btn" class="close-btn">🗙</span>
            <div id="modal-ana-container" class="modal-container">
                <div class="ana-container">
                    <div class="ana-container-item">
                        <label for="source-code" class="ana-label">代码内容</label>
                        <textarea id="source-code" class="ana-textarea"></textarea>
                        <button id="ana-code-btn" class="btn btn-primary" style="width: 100%">分析代码</button>
                    </div>
                    <div class="ana-container-item">
                        <div id="analysis-waiting" class="loading" style="display: block;">
                            <div class="analysis-placeholder">
                                <div class="placeholder-icon">💡</div>
                                <p class="placeholder-text">请点击"分析代码"按钮开始分析</p>
                                <div class="placeholder-hint">AI将为您提供代码的时间复杂度分析和优化建议</div>
                            </div>
                        </div>
                        <div id="analysis-loading" class="loading" style="display: none;">
                            <div class="analysis-placeholder">
                                <div class="spinner"></div>
                                <p class="placeholder-text">正在分析代码，请稍候...</p>
                                <div class="placeholder-hint">• 提供详细的复杂度分析和优化建议</div>
                                <div class="placeholder-hint">• 可视化展示算法性能特征</div>
                            </div>
                        </div>
                        <div id="analysis-tabs-container" class="tabs-container" style="display: none">
                            <div class="tabs-header">
                                <div class="tab-item active" data-tab="overview">总览</div>
                                <div class="tab-item" data-tab="visual">可视化</div>
                                <div class="tab-item" data-tab="suggestions">行分析</div>
                                <div class="tab-item" data-tab="explanation">优化建议</div>
                            </div>
                            <div class="tabs-content">
                                <div class="tab-content active" id="overview-tab">
                                    <div class="analysis-result">
                                        <div class="result-content">
                                            <h4>整体复杂度分析</h4>
                                            <div class="analysis-metrics">
                                                <div class="metric-item">
                                                    <div class="metric-label">复杂度</div>
                                                    <div class="metric-value" id="complexity-value">-</div>
                                                </div>
                                                <div class="metric-item">
                                                    <div class="metric-label">分析可信度</div>
                                                    <div class="metric-progress">
                                                        <div class="progress-bar-container">
                                                            <div class="progress-bar">
                                                                <div class="progress-fill" id="confidence-fill"
                                                                     style="width: 0%"></div>
                                                            </div>
                                                        </div>
                                                        <div class="progress-text" id="confidence-text">0%</div>
                                                    </div>
                                                </div>
                                                <div class="metric-item">
                                                    <div class="metric-label">性能</div>
                                                    <div class="metric-value" id="performance-rating">-</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="result-content">
                                            <h4>分析总结</h4>
                                            <p id="explanation-value">-</p>
                                        </div>
                                        <div class="result-content">
                                            <h4>常见复杂度对比</h4>
                                            <div class="complexity-table-container">
                                                <table class="data-table complexity-table">
                                                    <thead>
                                                    <tr>
                                                        <th>复杂度</th>
                                                        <th>n=10</th>
                                                        <th>n=100</th>
                                                        <th>n=1000</th>
                                                        <th>性能</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    <tr>
                                                        <td>O(1)</td>
                                                        <td>1</td>
                                                        <td>1</td>
                                                        <td>1</td>
                                                        <td><span class="rating excellent">优秀</span></td>
                                                    </tr>
                                                    <tr>
                                                        <td>O(log n)</td>
                                                        <td>3</td>
                                                        <td>7</td>
                                                        <td>10</td>
                                                        <td><span class="rating good">良好</span></td>
                                                    </tr>
                                                    <tr>
                                                        <td>O(n)</td>
                                                        <td>10</td>
                                                        <td>100</td>
                                                        <td>1000</td>
                                                        <td><span class="rating average">一般</span></td>
                                                    </tr>
                                                    <tr>
                                                        <td>O(n log n)</td>
                                                        <td>33</td>
                                                        <td>664</td>
                                                        <td>9966</td>
                                                        <td><span class="rating acceptable">容忍</span></td>
                                                    </tr>
                                                    <tr>
                                                        <td>O(n²)</td>
                                                        <td>100</td>
                                                        <td>10000</td>
                                                        <td>1000000</td>
                                                        <td><span class="rating poor">较差</span></td>
                                                    </tr>
                                                    <tr>
                                                        <td>O(2^n)</td>
                                                        <td>1024</td>
                                                        <td>1.3×10³⁰</td>
                                                        <td>∞</td>
                                                        <td><span class="rating terrible">极差</span></td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-content" id="visual-tab">
                                    <div class="analysis-result">
                                        <div class="result-content">
                                            <h4>复杂度增长曲线</h4>
                                            <div class="chart-container"
                                                 style="position: relative; height:200px; width:100%">
                                                <canvas id="complexityChart"></canvas>
                                            </div>
                                        </div>
                                        <div class="result-content">
                                            <h4>复杂度分布</h4>
                                            <div class="chart-container"
                                                 style="position: relative; height:200px; width:100%">
                                                <canvas id="complexityDistributionChart"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-content" id="suggestions-tab">
                                    <div class="analysis-result">
                                        <div class="line-analysis-container" id="line-analysis-container">
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-content" id="explanation-tab">
                                    <div class="analysis-result">
                                        <div class="suggestions-container" id="suggestions-container">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <button id="export-ana-json-btn" class="btn btn-primary" style="width: 100%">导出JSON
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 链路弹出框结构 -->
    <div id="modal" class="modal">
        <div class="modal-content">
            <span id="modal-close-btn" class="close-btn">🗙</span>
            <div id="modal-trace-container" class="modal-container">
                <div class="ana-container">
                    <div class="ana-container-item">
                        <label for="trace-tree" class="ana-label">链路信息</label>
                        <div id="trace-tree" class="ana-textarea"></div>
                        <button id="trace-btn" class="btn btn-primary" style="width: 100%">分析链路</button>
                    </div>
                    <div class="ana-container-item">
                        <div id="trace-waiting" class="loading" style="display: block;">
                            <div class="analysis-placeholder">
                                <div class="placeholder-icon">💡</div>
                                <p class="placeholder-text">请点击"分析链路"按钮开始分析</p>
                                <div class="placeholder-hint">AI将为您提供调用链路性能分析和优化建议</div>
                            </div>
                        </div>
                        <div id="trace-loading" class="loading" style="display: none;">
                            <div class="analysis-placeholder">
                                <div class="spinner"></div>
                                <p class="placeholder-text">正在分析链路，请稍候...</p>
                                <div class="placeholder-hint">• 提供详细的调用链路性能分析和优化建议</div>
                                <div class="placeholder-hint">• 可视化展示链路性能特征</div>
                            </div>
                        </div>
                        <div id="trace-tabs-container" class="tabs-container" style="display: none">
                            <div class="tabs-content" style="height: calc(100% - 36px);">
                                <div class="tab-content active">
                                    <div class="analysis-result">
                                        <div class="result-content">
                                            <h4>概况</h4>
                                            <p id="overallAssessment-value">-</p>
                                        </div>
                                    </div>
                                    <div class="analysis-result">
                                        <div class="result-content">
                                            <h4>分析可信度</h4>
                                            <div class="metric-progress">
                                                <div class="progress-bar-container">
                                                    <div class="progress-bar">
                                                        <div class="progress-fill" id="trace-confidence-fill"
                                                             style="width: 0%"></div>
                                                    </div>
                                                </div>
                                                <div class="progress-text" id="trace-confidence-text">0%</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="analysis-result">
                                        <div class="result-content">
                                            <h4>性能瓶颈</h4>
                                            <div id="performance-bottlenecks"></div>
                                        </div>
                                    </div>
                                    <div class="analysis-result">
                                        <div class="result-content">
                                            <h4>优化建议</h4>
                                            <div id="optimization-suggestions"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <button id="export-trace-json-btn" class="btn btn-primary" style="width: 100%">
                                导出JSON
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="toast">这是一个Toast通知消息</div>
</div>
</body>
</html>
